﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../../css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/poi.css" rel="stylesheet" />
</head>
<body>
    <div class="content">
        <header class="header">
            <a href="javascript:history.back();" class="back fa fa-angle-left">
            </a>
            <div class="text" data-bind="text:title"></div>
        </header>
        <section class="search-wrapper" data-bind="enterkey:search">
            <input class="input" type="search" maxlength="20" placeholder="输入关键字搜素" data-bind="value:keywords">
            <i class="botton fa fa-search" data-bind="click:search"></i>
        </section>
        <section class="poi-list">
            <div class="poi-list-container" data-bind="foreach:pois">
                <div class="poi-item" data-bind="click:$root.book,attr:{id:'poi_'+id}">
                    <div class="img-wapper">
                        <img data-bind="attr:{ src:logo }" />
                    </div>
                    <div class="info-wapper">
                        <div class="info-title">
                            <div class="title" data-bind="text:name"></div>
                            <div class="distince"></div>
                        </div>
                        <div class="info-desc" data-bind="html:introduction"></div>
                        <div class="info-botton">
                            <span class="button" data-bind="click:$root.book">
                                <i data-bind="attr:{class:$parent.actionCss}"></i>
                                <!--ko text: $parent.actionName--><!--/ko-->
                            </span>
                            <span class="button" data-bind="click:$root.go,clickBubble:false">
                                <i class="fa fa-location-arrow"></i> 去这
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="../../scripts/jquery/jquery-2.1.0.min.js"></script>
    <script src="../../scripts/jquery/jquery.url.js"></script>
    <script src="../../scripts/knockout/knockout-3.3.0.js"></script>
    <script src="../../scripts/knockout/knockout-extend.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=geometry&key=XQSBZ-MYPKU-EJSVT-4XWSN-QWJXH-2TBDM"></script>
    <script src="js/PoiViewModel.js"></script>
    <script type="text/javascript">
        var aa = Math.abs(~2016);
        var viewModel = null;
        $(function () {
            var param = {
                wid: $.url.param('wid'),
                type: $.url.param('type')
            }
            viewModel = new PoiViewModel(param);
            ko.applyBindings(viewModel);
            getLocation();
        });

        //获取当前位置的坐标
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(computeDistance);
            }
        };

        function computeDistance(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var currentLatlng = new qq.maps.LatLng(lat, lng);

            if (!viewModel) return;

            var timer = setInterval(function () {
                $.each(viewModel.pois(), function (index, poi) {
                    var poiLatlng = new qq.maps.LatLng(poi.lat, poi.lng);
                    var distince = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(currentLatlng, poiLatlng) / 1000);

                    $("#poi_" + poi.id).find(".distince").text(distince + 'km');
                });

                clearInterval(timer);
            }, 500);
        }
    </script>
</body>
</html>
